<template>
  <el-dialog
    title="设备信息"
    :visible.sync="visible"
    :width="form.deviceType == 'mem' ? '800px': '700px'"
    append-to-body
  >
    <div style="display: flex;">
      <div style="width: 100px;">
        <div style="position: relative;">
          <!-- 站位图片 -->
          <img style="width: 100%;" src="">
          <svg-icon v-if="form.deviceType == 'ammeter'" icon-class="fj_ammeter" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" />
          <svg-icon v-if="form.deviceType == 'camera'" icon-class="fj_camera" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" />
          <svg-icon v-if="form.deviceType == 'radar'" icon-class="fj_radar" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" />
          <svg-icon v-if="form.deviceType == 'mem'" icon-class="fj_mem" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" />
        </div>
      </div>
      <el-form
        ref="form"
        label-width="80px"
        size="small"
        style="flex:1;padding-left: 30px;"
      >
        <!-- <div style="column-gap: 40px;column-rule: 1px solid #E9ECF0;column-count:2;"> -->
        <fieldset
          style="width:49%;height:100%;float: left;"
          :style="{
            'width': form.deviceType == 'mem' ? '40%': '49%'
          }"
        >
          <legend>设备参数</legend>
          <el-form-item style="margin-bottom: 10px;" label="设备名称" prop="name">
            <el-tooltip :content="form.name" placement="top-start"><div class="text-cut" style="max-width: 150px;">{{ form.name }}</div></el-tooltip>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px;" label="设备编号" prop="sn">
            <el-tooltip :content="form.sn" placement="top-start"><div class="text-cut" style="max-width: 150px;">{{ form.sn }}</div></el-tooltip>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px;" label="设备类型" prop="deviceType">
            <span v-if="form.deviceType == 'ammeter'">控制器</span>
            <span v-if="form.deviceType == 'camera'">摄像头</span>
            <span v-if="form.deviceType == 'radar'">雷达</span>
            <span v-if="form.deviceType == 'mem'">电表</span>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px;" label="通道号" prop="code">
            <el-tooltip :content="form.code" placement="top-start"><div class="text-cut" style="max-width: 150px;">{{ form.code }}</div></el-tooltip>
          </el-form-item>
        </fieldset>
        <fieldset
          style="width:49%;height:100%;display: inline-block;"
          :style="{
            'width': form.deviceType == 'mem' ? '58%': '49%'
          }"
        >
          <legend>运行参数</legend>
          <el-form-item style="margin-bottom: 10px;" label="是否使用" prop="isUsed">
            <span v-if="form.isUsed == 1">使用</span>
            <span v-if="form.isUsed == 0">未使用</span>
          </el-form-item>
          <el-form-item
            v-if="form.deviceType == 'ammeter'"
            style="margin-bottom: 10px;"
            label="控制模式"
            prop="controlMode"
          >
            <span v-if="form.controlMode == 'auto'">自动</span>
            <span v-if="form.controlMode == 'manual'">手动</span>
          </el-form-item>
          <el-form-item
            v-if="form.deviceType == 'ammeter'"
            style="margin-bottom: 10px;"
            label="亮灯时间"
            prop="recTime"
          >{{ form.recTime }}s</el-form-item>
          <el-form-item
            v-if="form.deviceType == 'camera'"
            style="margin-bottom: 10px;"
            label="车辆通过时间"
            prop="lastTime"
          >{{ new Date(Number(form.lastTime)) }}</el-form-item>
          <el-form-item
            v-if="form.deviceType == 'radar'"
            style="margin-bottom: 10px;"
            label="灵敏度"
            prop="recPrecision"
          >{{ form.recPrecision }}</el-form-item>
          <template v-if="form.deviceType == 'mem'">
            <el-row :gutter="0">
              <el-col :span="8">
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="电流A"
                  prop="currentA"
                >{{ form.currentA }}A</el-form-item>
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="电流B"
                  prop="currentB"
                >{{ form.currentB }}A</el-form-item>
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="电流C"
                  prop="currentC"
                >{{ form.currentC }}A</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="电压A"
                  prop="voltageA"
                >{{ form.voltageA }}V</el-form-item>
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="电压B"
                  prop="voltageB"
                >{{ form.voltageB }}V</el-form-item>
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="电压C"
                  prop="voltageC"
                >{{ form.voltageC }}V</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="功率A"
                  prop="powerA"
                >{{ form.powerA }}W</el-form-item>
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="功率B"
                  prop="powerB"
                >{{ form.powerB }}W</el-form-item>
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="功率C"
                  prop="powerC"
                >{{ form.powerC }}W</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="55px"
                  style="margin-bottom: 10px;"
                  label="总功率"
                  prop="powerTotal"
                >{{ form.powerTotal }}W</el-form-item>
              </el-col>
            </el-row>
          </template>
        </fieldset>
        <!-- </div> -->
        <!--  -->
      </el-form>
    </div>
    <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div> -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      form: {}
    }
  },
  methods: {
    open(deviceInfo) {
      this.form = deviceInfo
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
fieldset {
  border: 1px solid #7F9DB9;
}
</style>
